<template>
  <view class="content">
    <view class="child-system">
      <view class="controller">
        <view class="quit" @click="closeData">关闭</view
        ><!-- <view class="reset" @click="resetData">重置</view> --><view
          class="ok"
          @click="ok"
          >确认</view
        >
      </view>
      <view class="item-list">
        <template v-show="station.length > 0">
          <u-checkbox-group
            :max="faultStatus == 2 ? 2 : 999"
            :wrap="wrap"
            @change="checkboxGroupChange"
          >
            <u-checkbox
              v-model="item.checked"
              v-for="(item, index) in stationList"
              :key="index"
              :name="item.name"
              >{{ item.name }}</u-checkbox
            >
          </u-checkbox-group>
          <!-- <view class="item" v-for="(item, index) in station" :key="index">{{item.text}}</view> -->
        </template>
        <view v-show="station.length == 0" class="empty">无数据</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: ["station", "faultStatus", "stationName"],
  data() {
    return {
      stationList: [],
      name_list: "大学城南",
      wrap: true,
    };
  },
  watch: {
    station(news, olds) {
      this.stationList = news;
      if (this.stationName) {
        this.name_list = this.stationName;
      }
    },
  },
  methods: {
    closeData() {
      this.$emit("close");
    },
    checkboxGroupChange(e) {
      this.name_list = e;
      // 'console.log(e)
      // if(this.faultStatus==2&&e.length>2){
      // 	let lastEstring= e[e.length-1];
      // 	let tempStationList = this.stationList
      // 	tempStationList.forEach(item=>{
      // 		if(item.text==lastEstring){
      // 			item.checked = false
      // 		}
      // 	})
      // 	e.splice(-1)
      // 	this.name_list = e
      // 	uni.showToast({title:'只能选择两个站点',icon:'none'});
      // 	return;
      // }
      // else{

      // }'
    },
    ok() {
      let id = [];
      this.station.map((item) => {
        if (this.name_list.includes(item.name)) id.push(item.id);
      });
      if (this.station.length == 0) {
        this.name_list = "";
      }
      this.$emit("setStation", { name: this.name_list, id });
    },
  },
};
</script>

<style scoped>
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: auto;
  z-index: 1000;
  background: #f9fbfe;
}
.system {
  width: 91.5%;
  margin: 10px auto;
  color: #000;
}
.system > .title {
  line-height: 36px;
  font-size: 16px;
  font-weight: bold;
}
.system .add {
  float: right;
  color: #fff;
  background: #307be0;
  width: 70px;
  line-height: 36px;
  font-size: 12px;
  text-align: center;
  border-radius: 4px;
}
.system .list {
  border-radius: 4px;
  font-size: 14px;
  margin-top: 15px;
  color: #303133;
  box-shadow: 0 0 2px 2px rgb(0 0 0 / 10%);
}
.system > .list:last-child {
  margin-bottom: 40px;
}
.system .list > .title {
  background: #d8d8d8;
  line-height: 50px;
  padding: 0 15px;
  height: 50px;
}
.system .list > .title > .remove {
  color: red;
  float: right;
}
.list > .list-info {
  background: #fff;
  padding-left: 15px;
}
.list > .list-info .hr {
  height: 1px;
  background: #d8d8d8;
}
.child-system {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
  color: #000;
  font-size: 12px;
  z-index: 100; /* height: 50vh;overflow: auto; */
}
.child-system > .controller {
  line-height: 40px;
  padding: 0 10px;
  border-bottom: 1px solid #d7d7d7;
  position: relative;
}
.child-system > .controller > .quit,
.child-system > .controller > .ok {
  display: inline-block;
}
.child-system > .controller > .reset {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.child-system > .controller > .ok {
  float: right;
  line-height: 40px;
}
.system-name {
  line-height: 46px;
  border-bottom: 1px solid #d7d7d7;
  height: 46px;
  color: #2979ff;
  font-size: 14px;
}
.system-name > .nowrap {
  width: 96%;
  white-space: nowrap;
  overflow-x: scroll;
  margin: 0 auto;
}
.system-name > .nowrap > .name {
  display: inline-block;
}
.item-list {
  height: 40vh;
  overflow: auto;
  padding: 0 15px;
}
.item {
  line-height: 37px;
  border-bottom: 1px solid #d7d7d7;
  padding: 0 15px;
}
.push {
  position: fixed;
  bottom: 0;
  left: 0;
  color: #fff;
  background: #307be0;
  width: 100%;
  line-height: 36px;
  font-size: 12px;
  text-align: center;
}
.empty {
  padding: 30px;
  text-align: center;
  font-size: 16px;
}
</style>

<style>
.u-checkbox {
  line-height: 37px;
}
</style>
